<template>
    <rx-layout>
        <div slot="left" width="200" showButton="true">
            <rx-fit>
                <rx-category-treeeditor
                    cat-key="BPM"
                    :statisticConfig="statisticConfig"
                    read-key="task.read"
                    :edit="false"
                    @handSelect="handSelect"
                    :async="true"
                    v-if="isShowManageTree"
                    :isAdmin="isManageToTree"
                    :treeRootList="treeRootList"
                    :isBpmClient="isMyBpmClient"
                    :isMyBpm="isMyBpmClient"
                ></rx-category-treeeditor>
            </rx-fit>
        </div>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <rx-list-title :title="i18n('list.completeItem','我的已办')"></rx-list-title>
          <span class="search-btn-box" v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i
                class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
          </span>
                </div>
                <div btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel"
                     @close="closeSearchbar">
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.billNo','单号')">
                                    <a-input :placeholder="i18n('form.billNo','单号','input')" v-model="queryParam['BILL_NO_']" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.itemTitle','事项标题')">
                                    <a-input :placeholder="i18n('form.itemTitle','事项标题','input')"
                                             v-model="queryParam.Q_SUBJECT__S_LK"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('list.taskName','任务名称')">
                                    <a-input :placeholder="i18n('list.taskName','任务名称','input')"
                                             v-model="queryParam.Q_NODE_NAME__S_LK"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan" v-if="isheader">
                    <span class="table-page-search-submitButtons">
                      <a-button type="primary" icon="search"
                                @click="search">{{ $ti18('rxList.searchBtn', '查询') }}</a-button>
                      <a-button style="margin-left: 4px" @click="cancel">{{ $ti18('rxList.resetBtn', '重置') }}</a-button>
                      <a @click="toggleAdvanced" style="margin-left: 8px">
                        {{ advanced ? i18n('list.putAwayBtn', '收起') : i18n('list.expansionBtn', '展开') }}
                        <a-icon :type="advanced ? 'up' : 'down'"/>
                      </a>
                    </span>
                            </a-col>
                            <template v-if="advanced">
                                <a-col :span="colSpan">
                                    <a-form-item :label="i18n('list.taskCreateTime','任务创建时间') + i18n('list.from','从')">
                                        <a-date-picker
                                            style="width: 100%"
                                            :placeholder="i18n('list.taskCreateTime','任务创建时间','input')"
                                            v-model="queryParam.Q_CREATE_TIME__D_GE"
                                            format="YYYY-MM-DD"
                                            @change="searchRangeDateChange($event,$event,{queryField:'Q_CREATE_TIME__D_GE'},'YYYY-MM-DD')"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="colSpan">
                                    <a-form-item :label="i18n('list.to','至')">
                                        <a-date-picker
                                            style="width: 100%"
                                            :placeholder="i18n('list.taskCreateTime','任务创建时间','input')"
                                            v-model="queryParam.Q_CREATE_TIME__D_LE"
                                            format="YYYY-MM-DD"
                                            @change="searchRangeDateChange($event,$event,{queryField:'Q_CREATE_TIME__D_LE'},'YYYY-MM-DD')"
                                        />
                                    </a-form-item>
                                </a-col>
                            </template>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    v-if="isShowManageTree"
                    :bordered="isBorder"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-bpm/bpm/core/bpmCheckHistory/getMyApproved"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="hisId"
                    :loadDataOnstart="true"
                    @selectChange="onSelectChange"
                    @getListData="loadDataAgen"
                >
          <span slot="jumpType" slot-scope="{ text, record, index }">
            <a-tag :color="opinionMap[text]? opinionMap[text].color:''">
              <span>{{ opinionMap[text].text }}</span>
            </a-tag>
          </span>
                    <span slot="completeTime" slot-scope="{ text, record, index }">
            {{ text }}
          </span>
                    <span slot="billNo" slot-scope="{ text, record, index }">
            {{ record.billNo }}
          </span>
                    <span slot="duration" slot-scope="{ text, record, index }">
            {{ text | filterDuration }}
          </span>
                    <span slot="appId" slot-scope="{ text, record }">
                {{ allApps[text] ? $i18(allApps[text].appName, '应用名称') : $ti18('rxList.noAppName', '无') }}
            </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
            <!--            <span><a @click="retrieveTask(record)">取回</a></span>-->
            <span><a @click="instDetail(record)" :title="$ti18('rxList.detailBtn', '明细')">{{ $ti18('rxList.detailBtn', '明细') }}</a></span>
            <span><a @click="transferTo(record)" :title="i18n('option.forward', '转发')">{{ i18n('option.forward', '转发') }}</a></span>
          </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>


<script>
import {AppBaseList, RxLayout, Util, RxFit, RxGrid} from '@lowcode/jpaas-common-lib';
import BpmInstTransfer from "../core/BpmInstTransfer";
import RxCategoryTreeeditor from '@/components/redxun/rx-category-treeeditor'
import FlowUtil from "../js/FlowUtil";
import {mapState} from 'vuex';
import AppSearch from "@/views/modules/share/AppSearch";
import RxSearchApp from "@/views/modules/share/rx-search-app";
import instAndTaskShare from "@/views/modules/bpm/core/js/instAndTaskShare";

export default {
    name: 'my-approved-tasks',
    mixins: [AppBaseList,instAndTaskShare, FlowUtil,AppSearch],
    components: {
        RxLayout,
        RxFit,
        RxGrid,
        RxCategoryTreeeditor,
        BpmInstTransfer,
        RxSearchApp
    },
    computed: {
        ...mapState({
            // 所属应用
            allApps: state => state.appSetting ? state.appSetting.allApps : {}
        }),
    },
    data() {
        return {
            treeData: [],
            selTreeId: '',
            gridData: [],
            // 表头
            columns: [
                {
                    title: this.$ti18('rxList.index', '序号'),
                    type: 'indexColumn',
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'},
                    width: 60,
                },

                {
                    title: this.i18n('form.itemTitle', '事项标题'),
                    dataIndex: 'subject',
                    width: 180,
                    ellipsis: false,
                },
                {
                    title: this.i18n('form.billNo', '业务单号'),
                    dataIndex: 'billNo',
                    width: 180,
                    scopedSlots: {customRender: 'billNo'},
                },
                {
                    title: this.i18n('form.nodeName', '节点'),
                    dataIndex: 'nodeName',
                    width: 100,
                },

                {
                    title: this.i18n('form.duration', '持续时间'),
                    dataIndex: 'duration',
                    width: 120,
                    scopedSlots: {customRender: 'duration'},
                },
                {
                    title: this.i18n('form.type', '类型'),
                    dataIndex: 'jumpType',
                    width: 70,
                    scopedSlots: {customRender: 'jumpType'},
                },
                {
                    title: this.i18n('form.completeTime', '完成时间'),
                    dataIndex: 'completeTime',
                    width: 150,
                    scopedSlots: {customRender: 'completeTime'},
                },
                {
                    title: this.i18n('form.appId', '所属应用'),
                    dataIndex: 'appId',
                    width: 140,
                    sortField: 'APP_ID_',
                    scopedSlots: {customRender: 'appId'}
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    dataIndex: 'action',
                    width: 120,
                    fixed :'right',
                    scopedSlots: {customRender: 'action'},
                },
            ],
            opinionMap: {
                SUBMIT:{color: 'green', text: this.i18n('option.submit', '提交')},
                AGREE: {color: 'green', text: this.i18n('option.pass', '通过')},
                SKIP: {color: 'red', text: this.i18n('option.skip', '跳过')},
                RECOVER: {color: 'red', text: this.i18n('option.withdraw', '撤回')},
                INVOKE_TO_STARTOR: {color: 'red', text: this.i18n('option.withdrawToStartor', '撤回(发起人)')},
                REFUSE: {color: 'red', text: this.i18n('option.oppose', '反对')},
                RUNNING: {color: 'green', text: this.i18n('option.run', '运行')},
                SUPSPEND: {color: 'red', text: this.i18n('option.suspend', '暂停')},
                CANCEL: {color: 'red', text: this.i18n('option.cancel', '作废')},
                LINKUP: {color: 'red', text: this.i18n('option.communicate', '沟通')},
                COMMUNICATE: {color: 'red', text: this.i18n('option.communicate', '沟通')},
                //REPLY_COMMUNICATE: { color: 'red', text: '回复沟通' },
                BACK: {color: 'red', text: this.i18n('option.reject', '驳回')},
                BACK_TO_STARTOR: {color: 'red', text: this.i18n('option.rejectPromoter', '驳回到发起人')},
                OVERTIME_AUTO_AGREE: {color: 'red', text: this.i18n('option.timeoutApproval', '超时审批')},
                TIMEOUT_SKIP: {color: 'red', text: this.i18n('option.timeoutSkip', '超时跳过')},
                CANCEL_COMMUNICATE: {color: 'red', text: this.i18n('option.cancelCommunicate', '取消沟通')},
                BACK_SPEC: {color: 'red', text: this.i18n('option.rejectNode', '驳回节点')},
                BACK_GATEWAY: {color: 'red', text: this.i18n('option.rejectGateway', '驳回网关')},
                ABSTAIN: {color: 'red', text: this.i18n('option.abstention', '弃权')},
                BACK_CANCEL: {color: 'red', text: this.i18n('option.rejectCancel', '驳回撤销')},
                RECOVER_CANCEL: {color: 'red', text: this.i18n('option.toWithdraw', '撤回撤销')},
                TRANSFER: {color: 'red', text: this.i18n('option.transfer', '转办')},
                INTERPOSE: {color: 'red', text: this.i18n('option.intervention', '干预')},
                LIVE: {color: 'red', text: this.i18n('option.revive', '复活')},
                ROAM_TRANSFER: {color: 'red', text: this.i18n('option.flow', '流转')},
                TRANS: {color: 'red', text: this.i18n('option.forward', '转发')},
                TRANS_REPLY: {color: 'red', text: this.i18n('option.replyForward', '回复转发')},
                PENDING: {color: 'blue', text: this.i18n('option.pending', '挂起')},
                RESTORE: {color: 'green', text: this.i18n('option.restore', '恢复')},
            },
            statisticConfig: {
                type: "static_bpm",
                table: "BPM_CHECK_HISTORY",
                field: "TREE_ID_",
                whereConf: [{
                    name: "HANDLER_ID_",
                    type: "string",
                    dateFormat: "",
                    op: "=",
                    value: "curUserId",
                    valueType: "context"
                },
                    {
                        name: "TENANT_ID_",
                        type: "string",
                        dateFormat: "",
                        op: "=",
                        value: "curTenantId",
                        valueType: "context"
                    }
                ]
            },
            isMyBpmClient:true,
            readKey:"task.read",
            readType:"rovedTask",
            isInit:true
        }
    },
    filters: {
        filterDuration(duration) {
            return Util.getDuration(duration)
        },
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "MyApprovedTasks", key);
        },
        searchRangeDateChange(date, dateString, e, format) {
            if (date.length == 2) {
                this.queryParam[e.queryField] = date[0].format('YYYY-MM-DD');
            } else {
                this.queryParam[e.queryField] = date.format(format);
            }
        },
        handSelect(curRow) {
            let selTreeId = curRow.treeId;
            var param = {};
            this.queryParam['Q_APP_ID__S_EQ']="";
            this.queryParam['treeCatType']="";
            this.queryParam['treeRootList']="";
            if (selTreeId != "0") {
                param = {Q_TREE_ID__S_EQ: selTreeId};
                if("rootApp"!=curRow.treeCatType){
                    param['Q_APP_ID__S_EQ']=curRow.appId;
                }
            } else {
                param = {Q_TREE_ID__S_EQ: ''};
                //顶级目录（包括平台与应用目录）
                if("rootApp"!=curRow.treeCatType){
                    param['treeCatType']='allRootApp';
                    param['treeRootList']=JSON.stringify(this.getAppList());
                }
            }

            if("rootApp"==curRow.treeCatType){
                param = {
                    'Q_TREE_ID__S_EQ': '',
                    'treeCatType':'customApp',
                    'treeRootList':JSON.stringify(this.getAppList())
                };
                if("defaultTree"==curRow.appId){
                    //顶级平台目录
                    param['treeCatType']='defaultApp';
                }else {
                    param['Q_APP_ID__S_EQ']=curRow.appId;
                }
            }
            this.loadData(param);
        },
        instDetail(record) {
            this.openDetail(record.appId, record.instId, "mydone");
        },
        transferTo(record) {
            var instId = record.instId;
            Util.open({
                component: BpmInstTransfer,
                curVm: this,
                widthHeight: ['800px', '500px'],
                title: this.i18n('list.forwardTitle', '转发流程实例') + record.subject,
                data: {
                    instId: record.instId,
                    send: true
                },
            }, function (action) {

            })
        },
        search() {
            this.$refs.table.loadData()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false;
        }
    },
}
</script>
<style scoped>

</style>

